<template>
  <div>
    <swiper ref="swiper" class="swiImgs" :options="swiperOption">
      <swiper-slide>
        <div class="yuHome" >
          <img class="logo" src="@/assets/images/logoTop.png" alt="">
          <span class="slide_arrow"></span>
          <img class="logo_center" src="@/assets/images/home_center_logo.png" alt="">
        </div>
      </swiper-slide>
      <swiper-slide>
        <Detail/>
      </swiper-slide>
      <swiper-slide>
        <ApplyNotes/>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
  import {swiper, swiperSlide} from "vue-awesome-swiper";
  import Detail from '@/components/Detail';
  import ApplyNotes from '@/components/ApplyNotes';
  export default {
    data() {
      return {
        swiperOption: {
          direction: "vertical"
        }
      };
    },
    computed: {
      swiper() {
        return this.$refs.swiper.swiper;
      }
    },
    mounted() {
      this.$nextTick(() => {
        let mySwiper = this.swiper;
        var startScroll, touchStart, touchCurrent;
        mySwiper.slides.on(
          "touchstart",
          function (e) {
            startScroll = this.scrollTop;
            touchStart = e.targetTouches[0].pageY;
          },
          true
        );
        mySwiper.slides.on(
          "touchmove",
          function (e) {
            touchCurrent = e.targetTouches[0].pageY;
            var touchesDiff = touchCurrent - touchStart;
            var slide = this;
            var onlyScrolling =
              slide.scrollHeight > slide.offsetHeight &&
              ((touchesDiff < 0 && startScroll === 0) ||
                (touchesDiff > 0 &&
                  startScroll === slide.scrollHeight - slide.offsetHeight) ||
                (startScroll > 0 &&
                  startScroll < slide.scrollHeight - slide.offsetHeight));
            if (onlyScrolling) {
              e.stopPropagation();
            }
          },
          true
        );
      });
    },
    components: {
      swiper,
      swiperSlide,
      Detail,
      ApplyNotes,
    }
  };
</script>
<style scoped>
  .yuHome {
    width: 7.5rem;
    height: 100%;
    min-height: 100%;
    background-image: url(~@/assets/images/ticket_home_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    /* animation: mm .6s .2s; */
  }
  .yuHome .logo_center{
    max-width: 6.18rem;
    width: 82.4%;
    position: absolute;
    top: 1.5rem;
    left: .66rem;
    animation: mm 1s;
  }
    @media screen and (max-width: 320px) {
      .yuHome .logo_center{
        width: 52%;
        left: 24%;
      }
    }
  .yuHome .logo{
    width: 2.86rem;
    height: .86rem;
    top: .27rem;
    right: .16rem;
    position: absolute;
  }

  @keyframes mm {
    0% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }

  .swiper-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .swiper-slide {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
</style>

